<!--
 * @Author: tkp
 * @Date: 2025-01-21 14:54:02
-->
<template>
  <div>
    <div class="comp_contain">
      <div class="comp_search">
        <Input v-model="bloc.queryForm.adminName" size="medium" clearable placeholder="系统管理员名称"></Input>
        <Input v-model="bloc.queryForm.sysAdminAccount" size="medium" clearable placeholder="系统管理员账号"></Input>
        <Select size="medium" placeholder="请选择是否默认" :clearable="false" v-model="bloc.queryForm.defaultFlag" :data="bloc.defaultFlagLst" :jsonType="{'value':'value','label':'label'}"></Select>
        <Select size="medium" placeholder="请选择是否可用" :clearable="false" v-model="bloc.queryForm.enable" :data="bloc.enableLst" :jsonType="{'value':'value','label':'label'}"></Select>
        <el-button type="text" size="medium" icon="el-icon-search" @click="query">搜索</el-button>
        <el-button type="text" size="medium" icon="el-icon-delete" @click="clearForm">清除条件</el-button>
        <el-button type="text" size="medium" icon="el-icon-plus" @click="add" v-hasRole="{frontRoute:'add'}">新增</el-button>
      </div>
      <div class="comp_body">
        <Table :tableOption="bloc.tableOption" tableHeight="calc(100vh - 254px)" :tableData="bloc.tableData" ref="MTable" operation :cellStyle="{'text-align':'center'}">
          <template slot="defaultFlag" slot-scope="scope">
            <el-switch v-model="scope.row.defaultFlag" @change="swichDefaultFlagChange($event,scope.row)" :active-value="1" :inactive-value="0">
            </el-switch>
          </template>
          <template slot="enable" slot-scope="scope">
            <el-switch v-model="scope.row.enable" @change="swichEnableChange($event,scope.row)" :active-value="1" :inactive-value="0">
            </el-switch>
          </template>
          <template slot="menu" slot-scope="scope">
            <el-button type="text" @click="modifyItem(scope.row)" v-hasRole="{frontRoute:'modify'}">编辑</el-button>
            <el-dropdown trigger="click" @command="dropClick($event,scope.row)">
              <el-button type="text">更多</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command='1' v-hasRole="{frontRoute:'role'}">配置角色</el-dropdown-item>
                <el-dropdown-item command='2' v-hasRole="{frontRoute:'pwd'}">修改密码</el-dropdown-item>
                <el-dropdown-item command='3' v-hasRole="{frontRoute:'del'}">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </Table>
      </div>
      <div class="comp_foot">
        <pagination :total="bloc.total" :page.sync="bloc.pageNum" background :limit.sync="bloc.pageSize" @pagination="query" layout="total, prev, pager, next, jumper"></pagination>
      </div>
    </div>
    <el-dialog title="新增管理员" :close-on-click-modal="false" :visible.sync="bloc.addPop" width="30%" append-to-body destroy-on-close v-if="bloc.addPop">
      <Add @addData="addDataFun"></Add>
    </el-dialog>
    <el-dialog title="编辑管理员" :close-on-click-modal="false" :visible.sync="bloc.editPop" width="30%" append-to-body destroy-on-close v-if="bloc.editPop">
      <Edit :data="bloc.rowItem" @editData="editDataFun"></Edit>
    </el-dialog>
    <el-dialog title="配置角色" :close-on-click-modal="false" :visible.sync="bloc.rolePop" width="30%" append-to-body destroy-on-close v-if="bloc.rolePop">
      <Role :data="bloc.rowItem" @roleData="roleDataFun"></Role>
    </el-dialog>
    <el-dialog title="修改密码" :close-on-click-modal="false" :visible.sync="bloc.pwdPop" width="30%" append-to-body destroy-on-close v-if="bloc.pwdPop">
      <Pwd :data="bloc.rowItem" @pwdData="pwdDataFun"></Pwd>
    </el-dialog>
  </div>
</template>

<script>
import { IndexBloc } from './bloc/index'
import Add from './temp/add.vue'
import Edit from './temp/edit.vue'
import Role from './temp/role.vue'
import Pwd from './temp/pwd.vue'
export default {
  name: 'adminManage',
  components: {
    Add,
    Edit,
    Role,
    Pwd,
  },
  data() {
    return {
      bloc: new IndexBloc()
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      this.bloc.pageNum = 1
      this.query()
    },
    query() {
      let param = {
        params: {
          sysAdminAccount: this.bloc.queryForm.sysAdminAccount,
          adminName: this.bloc.queryForm.adminName,
          defaultFlag: this.bloc.queryForm.defaultFlag,
          enable: this.bloc.queryForm.enable,
        },
        page: {
          pageNum: this.bloc.pageNum,
          pageSize: this.bloc.pageSize,
        }
      }
      this.bloc.load(param)
    },
    add() {
      this.bloc.rowItem = ''
      this.bloc.addPop = true
    },
    addDataFun(e) {
      if (e) {
        this.bloc.add(e).then(res => {
          this.messageSuccPop(res.msg)
          this.query()
          this.bloc.addPop = false
        })
      } else {
        this.bloc.addPop = false
      }
    },
    modifyItem(item) {
      this.bloc.rowItem = item
      this.bloc.editPop = true
    },
    dropClick(index, item) {
      if (index == '1') {
        this.bloc.rowItem = item
        this.bloc.rolePop = true
      } else if (index == '2') {
        this.bloc.rowItem = item
        this.bloc.pwdPop = true
      } else if (index == '3') {
        this.delItem(item)
      }
    },
    editDataFun(e) {
      if (e) {
        this.bloc.modify(e).then(res => {
          this.messageSuccPop(res.msg)
          this.query()
          this.bloc.editPop = false
        })
      } else {
        this.bloc.editPop = false
      }
    },
    roleDataFun(e) {
      if (e) {
        this.bloc.changeRole(e).then(res => {
          this.messageSuccPop(res.msg)
          this.query()
          this.bloc.rolePop = false
        })
      }
    },
    pwdDataFun(e) {
      if (e) {
        this.bloc.modifyPwd(e).then(res => {
          this.messageSuccPop(res.msg)
          this.query()
          this.bloc.pwdPop = false
        })
      } else {
        this.bloc.pwdPop = false
      }
    },
    swichDefaultFlagChange(e, item) {
      this.bloc.modifyDefaultFlag({ sysAdminId: item.sysAdminId, defaultFlag: e }).then(res => {
        this.messageSuccPop(res.msg)
        this.query()
      })
    },
    swichEnableChange(e, item) {
      this.bloc.modifyEnble({ sysAdminId: item.sysAdminId, enable: e }).then(res => {
        this.messageSuccPop(res.msg)
        this.query()
      })
    },
    delItem(item) {
      this.$confirm('是否删除该管理员信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.bloc.del(item.sysAdminId).then(res => {
          this.messageSuccPop(res.msg)
          this.query()
        })
      })
    },
    clearForm() {
      this.bloc.queryForm.adminName = ''
      this.bloc.queryForm.sysAdminAccount = ''
      this.bloc.queryForm.defaultFlag = ''
      this.bloc.queryForm.enable = ''
      this.load()
    },
  }
}
</script>

<style lang="scss" scoped>
.comp_contain {
  overflow: hidden;
  padding: 20px;
  border-radius: 6px;
  .comp_search {
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 20px;
    border-radius: 14px;
    margin-bottom: 16px;
  }
  .comp_body {
    border-radius: 14px;
    background: #fff;
    padding: 10px;
  }
  .comp_foot {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
</style>
